<!--
 * @Autor: dingxiaolin
 * @Date: 2021-05-07 16:29:06
 * @LastEditors: dingxiaolin
 * @LastEditTime: 2021-05-10 09:24:50
-->
<template>
    <div class="xsTable">
        <div class="xsTable-top">
            <div class="title">
                <div class="name">库存信息</div>
                <div class="count">总计： {{ totalCount }}台</div>
            </div>
            <div class="shaixuan">
                <span class="sxline">|</span>
                <img class="sximg" src="../assets/shaixuan.png" @click="openDialog" alt="" />
                <span class="sx" @click="openDialog">筛选</span>
            </div>
        </div>
        <div class="blank"></div>

        <el-table :data="tableData" empty-text="暂无数据" style="width: 100%" :header-cell-style="{ color: '#3484FF' }" :show-header="true">
            <el-table-column fixed="left" prop="fhrq" label="发货日期" align="center" width="100">
                <template #default="scope">
                    <span>{{ String(scope.row.fhrq).slice(0, 11) }}</span>
                </template>
            </el-table-column>
            <el-table-column prop="jx" label="机型" align="center" width="100"> </el-table-column>
            <el-table-column prop="jxms" label="主机机型描述" width="110" align="center"> </el-table-column>
            <el-table-column prop="sl" label="数量（台）" align="center" width="100"> </el-table-column>
            <el-table-column prop="pq" label="所属片区" align="center" width="100"> </el-table-column>
            <el-table-column prop="sf" label="省份" align="center"> </el-table-column>
            <el-table-column prop="jxkh" label="经销商" align="center" width="140"> </el-table-column>
            <el-table-column prop="xsy" label="销售员" align="center"> </el-table-column>
        </el-table>
        <van-pagination v-model="pageOption.pageNumber" :total-items="totalPage" @change="pageChange" mode="simple" />

        <!-- 搜索弹框 -->
        <van-dialog v-model:show="xsDialogShow" :show-confirm-button="false" width="94%">
            <div style="padding: 15px 10px; display: flex; justify-content: space-between">
                <span>  库存信息筛选 </span>
                <span @click="closeDialog">
                    <i class="el-icon-close"></i>
                </span>
            </div>
            <van-form @submit="onSubmit">
                <van-field v-model="form.jx" name="机型" label-width="100" label="机型" placeholder="请输入机型" />
                <van-field v-model="form.pq" name="所属片区" label-width="100" label="所属片区" placeholder="请输入所属片区" />
                <van-field v-model="form.sf" name="省份" label="省份" label-width="100" placeholder="请输入省份" />
                <van-field v-model="form.jxms" label-width="100" name="主机机型描述" label="主机机型描述" placeholder="请输入主机机型描述" />
                <van-field v-model="form.jxs" name="经销商" label-width="100" label="经销商" placeholder="请输入经销商" />
                <van-field v-model="form.xsy" name="销售员" label-width="100" label="销售员" placeholder="请输入销售员" />
                <van-field
                    label-width="100"
                    readonly
                    clickable
                    name="datetimePicker"
                    v-model="form.startTime"
                    label="发货起始日期"
                    placeholder="请选择发货起始日期"
                    @click="showPicker = true"
                    class="startTime"            
                />

                <van-field
                    clickable
                    label-width="100"
                    name="datePicker"
                    v-model="form.endTime"
                    label="发货结束日期"
                    placeholder="请选择发货结束日期"
                    @click="showPickerEnd = true"                    
                    class="endTime"
                />

                <div style="margin: 16px; display: flex; justify-content: space-evenly">
                    <van-button type="default" @click="reset" style="width: 153px; color: #666666">重置</van-button>
                    <van-button type="info" @click="searchValue" style="width: 153px; border: 1px solid #3484ff; background: #3484ff; color: #fff"
                        >搜索</van-button
                    >
                </div>
            </van-form>
        </van-dialog>
        <van-popup v-model:show="showPicker" position="bottom">
            <van-datetime-picker type="date" title="日期选择" v-model="currentDate" @confirm="onConfirmTime" @cancel="showPicker = false" />
        </van-popup>
        <van-popup v-model:show="showPickerEnd" position="bottom">
            <van-datetime-picker type="date" title="日期选择" v-model="currentDate" @confirm="onConfirmTimeEnd" @cancel="showPickerEnd = false" />
        </van-popup>
    </div>
</template>

<script lang="ts">
import { defineComponent, PropType, reactive, toRefs, ref, computed, nextTick, onMounted } from 'vue';
import { Sales, Delivery, Combine } from '@/http';

export default defineComponent({
    name: 'xsTable',
    components: {},
    props: {},
    setup() {
        const state = reactive({
            currentPage: 2,
            tableData: [],
            /**总计数量 */
            totalCount: 0,
            /**总页数 */
            totalPage: 0,
            /**搜索弹框是否显示 */
            xsDialogShow: false,
            /**搜索内容 */
            form: {
                jxs: '',
                /**机型 */
                jx: '',
                /**所属片区 */
                pq: '',
                /**省份 */
                sf: '',
                /**主机机型描述 */
                jxms: '',
                /**购机起始日期 */
                startTime: '',
                /**购机结束日期 */
                endTime: '',
                xsy:''
            },
            /**展示购机 起始时间选择器 */
            showPicker: false,
            /**展示购机 结束日期选择器 */
            showPickerEnd: false,
            pageOption: {
                pageNumber: 1,
                pageSize: 10,
            },
            currentDate: '',
        });
        /**确定购机起始时间 */
        const onConfirmTime = (time) => {
            state.form.startTime = timeFormat(new Date(time));
            state.showPicker = false;
        };
        /**确定购机结束日期 */
        const onConfirmTimeEnd = (time) => {
            state.form.endTime = timeFormat(new Date(time));
            state.showPickerEnd = false;
        };
        /*时间格式化*/
        const timeFormat = (data) => {
            let year = data.getFullYear();
            let month = data.getMonth() + 1 > 9 ? data.getMonth() + 1 : '0' + (data.getMonth() + 1);
            let day = data.getDate() > 9 ? data.getDate() : '0' + data.getDate();
            let hour = data.getHours() > 9 ? data.getHours() : '0' + data.getHours();
            let minutes = data.getMinutes() > 9 ? data.getMinutes() : '0' + data.getMinutes();
            let seconds = data.getSeconds() > 9 ? data.getSeconds() : '0' + data.getSeconds();
            let time = year + '-' + month + '-' + day;
            return time;
        };

        /**重置表格数据 */
        const reset = () => {
            state.form = {
                jxs: '',
                /**机型 */
                jx: '',
                /**所属片区 */
                pq: '',
                /**省份 */
                sf: '',
                /**主机机型描述 */
                jxms: '',
                /**购机起始日期 */
                startTime: '',
                /**购机结束日期 */
                endTime: '',
                xsy:''
            };
        };
        /**搜索数据 */
        const searchValue = () => {
            state.pageOption.pageNumber = 1;
            getData();
            state.xsDialogShow = false;
        };

        /**获取 表格数据 */
        const getData = () => {
            var fromList = {
                jxkh: state.form.jxs,
                jx: state.form.jx,
                jxms: state.form.jxms,
                pq: state.form.pq,
                sf: state.form.sf,
                startTime: state.form.startTime,
                endTime: state.form.endTime,
                pageNumber: state.pageOption.pageNumber,
                pageSize: state.pageOption.pageSize,
                xsy: state.form.xsy
            };

            Combine.GetStockList(fromList).then((res) => {
                state.totalCount = res.item1 as any;
                state.totalPage = res.item2 as any;
                state.tableData = res.item3 as any;
            });
        };

        onMounted(() => {
            state.currentDate = new Date() as any
            getData();
        });

        /**打开搜索弹框 */
        const openDialog = () => {
            reset();
            state.xsDialogShow = true;
        };
        /**页码改变的时候 */
        const pageChange = (value) => {
            state.pageOption.pageNumber = value;
            getData();
        };

        /**关闭 弹框 */
        const closeDialog = () => {
            state.xsDialogShow = false;
        };
        return {
            ...toRefs(state),
            openDialog,
            onConfirmTime,
            onConfirmTimeEnd,
            reset,
            searchValue,
            pageChange,
            closeDialog,
        };
    },
});
</script>

<style lang="scss" >
.xsTable {
    .el-table td {
        padding: 0 !important;
    }
    .xsTable-top {
        display: flex;
        justify-content: space-between;
        align-items: center;
        height: 40px;
        .title {
            display: flex;
            align-items: center;
            .name {
                font-family: 'PingFangSC-Medium';
                font-size: 14px;
                color: #303133;
                letter-spacing: 0;
                font-weight: 600;
                padding-left: 16px;
            }
            .count {
                font-family: PingFangSC-Regular;
                font-size: 12px;
                color: #303133;
                letter-spacing: 0;
                padding-left: 12px;
            }
        }
        .shaixuan {
            display: flex;
            align-items: center;
            padding-right: 16px;
            .sxline {
                font-family: PingFangSC-Regular;
                font-size: 12px;
                color: #909399;
                letter-spacing: 0;
            }
            .sx {
                font-family: PingFangSC-Regular;
                font-size: 12px;
                color: #909399;
                letter-spacing: 0;
                position: relative;
                top: 1px;
            }
            .sximg {
                width: 12px;
                height: 12px;
                margin-left: 8px;
                margin-right: 8px;
                position: relative;
                top: 2px;
            }
        }
    }
    .blank {
        width: 100%;
        height: 10px;
        background: rgb(245, 245, 245);
        display: flex;
    }
    .el-table thead th {
        border-bottom: 1px solid #3484ff !important;
        // border-right: 3px solid #084A5F !important;
    }
    .el-table td {
        border-bottom: 0px solid #084a5f !important;
    }
    .van-cell::after{
        border-bottom: 0px solid #fff;
    }
    .van-field__control{
        border: 1px solid #ccc !important;
        padding: 6px;
    }
    .van-cell{
        align-items: center;
        
    }
    .van-field__right-icon{
        position: absolute;
        right: 5px;
    }
    .endTime .van-field__control{
        background: red;
        background: url('../assets/date.png') no-repeat;
        background-position: 95% center  ;
        background-size: 15px 15px;
    }
    .startTime .van-field__control{
        background: red;
        background: url('../assets/date.png') no-repeat;
        background-position: 95% center  ;
        background-size: 15px 15px;
    }


}
</style>
